<template>
  <div class="app-container">
    <div class="fundodoo-condition">
      <CategoryCondition
        :condition-state="conditionsKey"
        @fetchConditionChange="fetchData"
      />
    </div>
    <div class="fundodoo-grid">
      <el-table
        :data="rowData"
        height="100%"
        style="width: 100%;"
        row-key="id"
        border
        :tree-props="{children: 'children', 'hasChildren': ''}"
      >
        <el-table-column
          type="index"
          width="50"
          header-align="center"
        />
        <el-table-column
          prop="label"
          label="名称"
          header-align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.label }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fundodooDisabled"
          label="状态"
          header-align="center"
        >
          <template slot-scope="scope">
            <div class="fundodoo-switch">
              <el-switch
                v-model="scope.row.fundodooDisabled"
                :disabled="true"
                @click.native="statusChange(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.pid"
              size="mini"
              @click="handleAdd(scope.$index, scope.row)"
            >添加</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { CategoryCondition } from '../components'
import { goodsCategoryTree, changeCategoryShowp } from '@/api/goodsCategory'

export default {
  name: 'GoodsCategoryList',
  components: {
    CategoryCondition
  },
  data() {
    return {
      conditionsKey: {},
      rowData: []
    }
  },
  created() {

  },
  beforeMount() {

  },
  methods: {
    fetchData(params) {
      const pushState = params.pushState
      delete params.pushState
      const replaceState = params.replaceState
      delete params.replaceState
      if (pushState) {
        if (replaceState) {
          history.replaceState(params, this.$route.meta.title, this.$route.path)
        } else {
          history.pushState(params, this.$route.meta.title, this.$route.path)
        }
      } else if (params.replaceState) {
        history.replaceState(params, this.$route.meta.title, this.$route.path)
      }
      goodsCategoryTree(params).then(res => {
        this.rowData = res.data
      })
    },
    statusChange(row) {
      const id = row.id
      const status = !row.fundodooDisabled
      changeCategoryShowp(id, status).then(res => {
        row.fundodooDisabled = status
      })
    },
    handleAdd() {
      this.$message('功能未实现')
    },
    handleEdit() {
      this.$message('功能未实现')
    },
    handleDelete() {
      this.$message('功能未实现')
    }
  }
}
</script>

<style scoped>

</style>
